<template>
  <div class='swiper'>
    <swiper
      :indicator-dots='true'
      indicator-color='#ea5a49'
      :interval='5000'
      :duration='1000'
      :circular='true'
    >
      <div v-for="(top, index) in imgUrls" :key='index'>
        <swiper-item>
          <img @click='bookDetail(img)' v-for='(img, key) in top' :key="key" :src='img.image' mode='aspectFit' class='slideimg'/>
        </swiper-item>
      </div>
    </swiper>
  </div>
</template>
<script>
export default {
  props: ['tops'],
  computed: {
    imgUrls () {
      let res = this.tops
      return [res.slice(0, 3), res.slice(3, 6), res.slice(6)]
    }
  },
  methods: {
    bookDetail (img) {
      wx.navigateTo({
        url: '/pages/detail/main?id=' + img.id
      })
    }
  }
}
</script>
<style lang='scss'>
.swiper{
  margin-top: 5px;
  .slideimg{
    width: 33%;
    height: 250rpx;
  }
}
</style>
